<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取token</title>
    <link rel="stylesheet" href="../src/css/common.css">
</head>
<body>
<script src="../src/js/vue-3.5.min.js"></script>
<script src="../src/js/axios.min.js"></script>
<script src="../src/js/tools.js"></script>
<div id="app">
    <div class="left">
        <div class="form-box">
            <div class="form-row">
                <label>api_url</label>
                <input type="text"  v-model="formData.api_url" placeholder="" style="width: 100%" />
            </div>
            <div class="form-row">
                <label>ws_url</label>
                <input type="text"  v-model="formData.ws_url" placeholder="" style="width: 100%" />
            </div>
<!--            <div class="form-row">-->
<!--                <label>project_id</label>-->
<!--                <input type="text"  v-model="formData.project_id" placeholder="" style="width: 100%" />-->
<!--            </div>-->
<!--            <div class="form-row">-->
<!--                <label>账号</label>-->
<!--                <input type="text"  v-model="formData.username" placeholder="" style="width: 100%" />-->
<!--            </div>-->
<!--            <div class="form-row">-->
<!--                <label>密码</label>-->
<!--                <input type="text"  v-model="formData.password" placeholder="" style="width: 100%" />-->
<!--            </div>-->
            <div class="form-row" style="display: flex;align-items: center">
                <button @click="login">&nbsp;&nbsp;&nbsp;配 置&nbsp;&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
    <div class="right">
        <pre>{{json_content}}</pre>
    </div>
</div>
<script>
    // 创建 Vue 3 应用实例
    const {createApp, ref, reactive, onMounted} = Vue;
    createApp({
        setup() {
            const json_content = ref("");
            const formData = reactive({
                api_url: "http://192.168.1.222:4500",
                ws_url: "ws://192.168.1.222:14500/echo",
            })
            const login = () => {
                // console.log("Hello")
                setLocalStorage("api_url", formData.api_url)
                setLocalStorage("ws_url", formData.ws_url)
                json_content.value = jsonFormat({
                    msg: "配置成功",
                    data: {
                        api_url: formData.api_url,
                        ws_url: formData.ws_url,
                    }
                })
            }
            const jsonFormat = (obj) => {
                return JSON.stringify(obj, null, 4)
            }
            onMounted(() => {

            })
            return {
                formData,
                json_content,
                login,
            };
        }
    }).mount('#app');
</script>
</body>
</html>